<template>
  <div class="user-container">
    <toppanel
      :title="title"
      :titleColor="titleColor"
      :cover="this.cover"
    >
      <div class="user-header">
        <van-cell-group :border="false">
          <van-cell
            :icon="avatar"
            :border="false"
            custom-class="user-header-avatar"
            value-class="user-header-avatar__value"
          >
            <div class="vip-badge">
              <van-icon name="/static/icons/crown.png" />
              <span>VIP会员</span>
            </div>
          </van-cell>
          <van-cell
            label="这家伙很懒，什么都没有写~"
            is-link
            url="/pages/index/main"
            :clickable="false"
            :border="false"
            value-class="user-header-text__value"
          >
            <view slot="title">
              <view class="user-header-text__username">
                <span>{{username}}</span>
                <van-icon
                  :name="genderIcon"
                  v-if="genderIcon"
                />
              </view>
            </view>
          </van-cell>
        </van-cell-group>
        <div class="user-stats">
          <div
            class="user-stats-item"
            v-for="(item,index) in stats"
            :key="index"
          >
            <div class="user-stats-item__number">{{item.number}}</div>
            <div class="user-stats-item__text">{{item.text}}</div>
          </div>
        </div>
      </div>
    </toppanel>

    <van-cell
      center
      title="帐号绑定手机号可以提升安全性哦~"
      custom-class="user-notice"
    >
      <van-button
        plain
        round
        color="#ff3264"
        size="mini"
        @click="onSearch"
      >去绑定</van-button>
      <van-icon
        slot="right-icon"
        name="cross"
        class="custom-icon"
      />
    </van-cell>
    <div class="user-body">
      <van-grid >
        <van-grid-item
          icon="/static/icons/message.png"
          text="消息"
        />
        <van-grid-item
          icon="/static/icons/shop.png"
          text="订单"
        />
        <van-grid-item
          icon="/static/icons/dangan.png"
          text="报名"
        />
        <van-grid-item
          icon="/static/icons/star.png"
          text="收藏"
        />
      </van-grid>

      <van-cell-group>
        <van-cell
          icon="user-o"
          title="参赛人信息"
          value="未设置"
          size="large"
          is-link
        />
        <van-cell
          icon="hotel-o"
          title="团体组织"
          size="large"
          is-link
        />
        <van-cell
          icon="flower-o"
          title="精彩瞬间"
          size="large"
          is-link
        />
        <van-cell
          icon="clock-o"
          title="浏览历史"
          value="9"
          size="large"
          is-link
        />
      </van-cell-group>
      <van-cell-group>
        <van-cell
          icon="share"
          title="邀请好友"
          size="large"
          is-link
        />
        <van-cell
          icon="setting-o"
          title="设置"
          value="内容"
          is-link
          size="large"
          :border="false"
        />
      </van-cell-group>
      <van-cell-group>
        <van-cell
          icon="clock-o"
          title="浏览历史"
          value="9"
          size="large"
          is-link
        />
        <van-cell
          icon="flower-o"
          title="精彩瞬间"
          size="large"
          is-link
        />
        <van-cell
          icon="share"
          title="邀请好友"
          size="large"
          is-link
        />
        <van-cell
          icon="setting-o"
          title="设置"
          value="内容"
          is-link
          size="large"
          :border="false"
        />
      </van-cell-group>
    </div>

  </div>
</template>

<script>
import toppanel from '@/components/toppanel'
import card from '@/components/card'
export default {
  components: {
    toppanel,
    card
  },

  data () {
    return {
      title: '',
      titleColor: '#000000',
      username: 'EMHOME',
      gender: 2,
      avatar: 'http://oss.youmbe.com/attachments/avatar/29.jpg',
      cover: 'http://oss.youmbe.com/assets/ucenter/background.jpg',
      stats: [
        {
          text: '获赞',
          number: 0
        },
        {
          text: '粉丝',
          number: 0
        },
        {
          text: '关注',
          number: 0
        }
      ],

      navBackgroundColor: '#ff6600',
      value: ''
    }
  },

  computed: {
    style () {
      if (this.cover) {
        return '' // 'background-image:url(' + this.cover + ');'
      }
      return ''
    },
    genderIcon () {
      if (this.gender === 1) {
        return '/static/icons/male.png'
      } else if (this.gender === 2) {
        return '/static/icons/female.png'
      }
      return ''
    }
  },

  created () {
    console.log('test')
  },
  methods: {
    onSearch () {
      wx.chooseAddress({
        success (res) {
          console.log(res.userName)
          console.log(res.postalCode)
          console.log(res.provinceName)
          console.log(res.cityName)
          console.log(res.countyName)
          console.log(res.detailInfo)
          console.log(res.nationalCode)
          console.log(res.telNumber)
        }
      })
    }
  }
}
</script>

<style lang="less">
.user-container {
  background: #f7f7f7;
}
.user {
  &-header {
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    .van-cell {
      background: transparent !important;
      color: #fff;
      &__left-icon-wrap {
        font-size: 64px !important;
        border-radius: 100%;
        box-sizing: border-box;
        border: 2px solid rgba(255, 255, 255, 0.9);
      }
      .van-icon__image {
        border-radius: 100%;
      }
      &__label {
        color: rgba(255, 255, 255, 0.5) !important;
      }
      &__right-icon-wrap {
        color: rgba(255, 255, 255, 0.5) !important;
        align-self: flex-end;
      }
    }
    &-text__username {
      font-size: 20px;
      display: flex;
      align-items: center;
      .van-icon {
        font-size: 16px !important;
        margin-left: 3px;
      }
    }
    &-avatar {
      padding-right: 0 !important;
      &__value {
        padding-top: 10px;
        .vip-badge {
          display: inline-flex;
          align-items: center;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 20px 0 0 20px;
          padding: 5px;
          color: #fff;
          .van-icon {
            margin-right: 5px;
          }
        }
      }
    }
  }
  &-notice {
    padding: 6px 15px !important;
    font-size: 12px !important;
    background: rgba(255, 50, 100, 0.1) !important;
    color: rgba(255, 50, 100, 0.9) !important;
    .van-cell__value {
      flex: none !important;
    }
    .van-button {
      display: block !important;
      margin-right: 10px;
      background-color: transparent !important;
    }
  }
  &-body {
    .van-grid-item__icon{
      font-size: 30px;
    }
    .van-grid-item__text{
      margin-top: 5px;
    }
    .van-cell-group {
      margin-top: 15px;
    }
  }
  &-stats {
    display: flex;
    align-items: center;
    padding: 0 15px 10px;
    &-item {
      display: inline-flex;
      margin-right: 10px;
      align-items: center;
      &__number {
        color: #fff;
        font-size: 14px;
        margin-right: 3px;
      }
      &__text {
        color: rgba(255, 255, 255, 0.8);
        font-size: 12px;
      }
    }
  }
}
</style>
